<template>
    <div class="choose-wrapper">
        <div :class="{'choose-item':true,'choose':item.value === nowChoose}" 
        v-for="item in dataSource" 
        @click="() => chooseItem(item)"
        :key="item.value">{{ item.label }}</div>
    </div>
</template>
<script setup>
import { ref } from 'vue';

// props: 
// 1.他是字典，还是圈舍
// emits:
// 1. 将选中的数据，emit到父组件
const props = defineProps({
    type:{
        // 1 代表字典  2代表圈舍
        type:Number,
        required: true
    }
})

const emits = defineEmits(['onChoose'])

const dataSource = ref([])
const nowChoose = ref('')

const chooseItem = (item) => {
    nowChoose.value = item.value
    emits('onChoose',nowChoose.value)
}

const getData = async () => {
    // 最终数据形式为：[{label:'牲畜品种',value:'v001'}]
    // 最终数据形式为：[{label:'重庆瑞丰xxx',value:1}]
    if (props.type === 1) {
        // 请求字典的接口
        const res = {'v001':'牲畜品种','v002':'牲畜类型'}
        dataSource.value = Object.keys(res).map(key => ({label:res[key],value:key}))
    }else if(props.type === 2){
        // 请求圈舍的接口
        const res = [{id:1,name:'重庆瑞丰xxx'},{id:2,name:'重庆凯源XXXX'}]
        dataSource.value = res.map(item => ({label:item.name,value:item.id}))
    }
}

getData()

</script>
<style lang="less" scoped>
.choose-wrapper{
    background-color: #fff;
    padding: 10px 14px;
    width: 200px;
    .choose-item{
        padding: 10px 0;
        line-height: 17px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        &.choose{
           color: #21B47C; 
        }
    }
}
</style>